<template>
	<view class="change-password-page">
		<view class="form-container">
			<u-form :model="formData" ref="formRef" label-width="200">
				<!-- 原密码 -->
				<u-form-item label="原密码" prop="oldPassword" required>
					<u-input v-model="formData.oldPassword" placeholder="请输入原密码" type="password" clearable
						:customStyle="{ fontSize: '15px' }" />
				</u-form-item>
				<!-- 新密码 -->
				<u-form-item label="新密码" prop="newPassword" required>
					<u-input v-model="formData.newPassword" placeholder="6-20位字母、数字或符号组合" type="password" clearable
						:customStyle="{ fontSize: '15px' }" />
				</u-form-item>
				<!-- 确认新密码 -->
				<u-form-item label="确认新密码" prop="confirmPassword" required>
					<u-input v-model="formData.confirmPassword" placeholder="请再次输入新密码" type="password" clearable
						:customStyle="{ fontSize: '15px' }" />
				</u-form-item>
			</u-form>
			<!-- 密码强度提示 -->
			<view class="password-strength" v-if="formData.newPassword">
				<text>密码强度：</text>
				<view class="strength-bar">
					<view class="bar-item" :class="[passwordStrength >= 1 ? 'active' : '']"></view>
					<view class="bar-item" :class="[passwordStrength >= 2 ? 'active' : '']"></view>
					<view class="bar-item" :class="[passwordStrength >= 3 ? 'active' : '']"></view>
				</view>
				<text class="strength-text">{{ strengthText }}</text>
			</view>
			<!-- 提交按钮 -->
			<u-button type="primary" shape="circle" :loading="loading" @click="submitForm">确认修改</u-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad,onReady } from '@dcloudio/uni-app'
	import { updatePwdApi } from '@/apis/user.js'
	import store from '@/store/index.js'

	const formRef = ref()
	onReady(() => {
		formRef.value.setRules(rules)
	})
	// 表单数据
	const formData = ref({
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	})

	// 加载状态
	const loading = ref(false)

	// 表单验证规则
	const rules = {
		oldPassword: [{
				required: true,
				message: '请输入原密码',
				trigger: ['blur', 'change']
			},
			{
				min: 6,
				max: 20,
				message: '密码长度在6-20个字符之间',
				trigger: ['blur', 'change']
			}
		],
		newPassword: [{
				required: true,
				message: '请输入新密码',
				trigger: ['blur', 'change']
			},
			{
				min: 6,
				max: 20,
				message: '密码长度在6-20个字符之间',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					if (value === formData.value.oldPassword) {
						callback(new Error('新密码不能与原密码相同'))
					} else {
						callback()
					}
				},
				trigger: ['blur', 'change']
			}
		],
		confirmPassword: [{
				required: true,
				message: '请确认新密码',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					if (value !== formData.value.newPassword) {
						callback(new Error('两次输入的密码不一致'))
					} else {
						callback()
					}
				},
				trigger: ['blur', 'change']
			}
		]
	}

	// 计算密码强度
	const passwordStrength = computed(() => {
		const password = formData.value.newPassword
		if (!password) return 0

		let strength = 0
		if (password.length >= 8) strength++
		if (/[A-Z]/.test(password)) strength++
		if (/[0-9]/.test(password)) strength++
		if (/[^A-Za-z0-9]/.test(password)) strength++

		return Math.min(3, Math.floor(strength))
	})

	// 密码强度文本
	const strengthText = computed(() => {
		const strength = passwordStrength.value
		const texts = ['弱', '中', '强']
		return strength > 0 ? texts[strength - 1] : ''
	})
	
	// 构建查询字符串
	function buildQueryString(params) {
	  return Object.keys(params)
	    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
	    .join('&')
	}

	// 提交表单
	const submitForm = () => {
		formRef.value.validate(async (valid ) => {
			if(!valid) return
			try{
				const { oldPassword , newPassword  } = formData.value
				const queryString = buildQueryString({oldPassword,newPassword})
				await updatePwdApi(queryString)
				uni.$u.toast("修改成功，请重新登录")
				setTimeout(() => {
					store.dispatch('logout')
				},1000)
			}catch (err){
				console.log("cuow",err)
			}
		})
	}
</script>

<style lang="scss">
	.change-password-page {
		min-height: 100vh;
		background-color: #f7f8fa;
		padding: 20rpx 30rpx;

		.form-container {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 40rpx;
			margin-top: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}

		.password-strength {
			display: flex;
			align-items: center;
			margin: 30rpx 0;
			font-size: 26rpx;
			color: #666;

			.strength-bar {
				display: flex;
				margin: 0 20rpx;

				.bar-item {
					width: 60rpx;
					height: 8rpx;
					background-color: #ebedf0;
					margin-right: 10rpx;
					border-radius: 4rpx;

					&.active {
						background-color: #2979ff;
					}
				}
			}

			.strength-text {
				color: #2979ff;
				font-weight: 500;
			}
		}

		// uView表单样式调整
		:deep(.u-form-item) {
			padding: 24rpx 0;

			.u-form-item__body {
				padding: 0;
			}
		}
	}
</style>